<!DOCTYPE html>
<html lang="en">

<head>
	<title>用户管理页</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
	<link rel="stylesheet" href="css/uniform.css" />
	<link rel="stylesheet" href="css/select2.css" />
	<link rel="stylesheet" href="css/matrix-style2.css" />
	<link rel="stylesheet" href="css/matrix-media.css" />
	<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>
</head>

<body>

	<div id="content">
		<div id="content-header">
			<h1>用户信息管理</h1>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">

					<div class="widget-box">
						<div class="widget-title"> <span class="icon">
								<input type="checkbox" id="title-checkbox" name="title-checkbox" />
							</span>
							<h5>用户信息表</h5>
						</div>
						<div class="widget-content nopadding">
							<table class="table table-bordered table-striped with-check" id="table">
								<thead>
									<tr>
										<th><i class="icon-resize-vertical"></i></th>
										<th>id</th>
										<th>用户名</th>
										<th>密码</th>
										<th>邮箱</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="tbody">
									<tr>
										<td><input type="checkbox" /></td>
										<!-- <td id="uid">1</td>
										<td contenteditable="true" id="name">张学友</td>
										<td id="password" contenteditable="true">456123</td>
										<td class="center" id="email" contenteditable="true">34242777@qq.com</td> -->
										<td>
											<button type="submit" class="btn btn-success">修改并保存</button>
											<button type="submit" class="btn btn-danger">删除</button>
											<button type="submit" class="btn btn-info">Edit</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers"
						id="DataTables_Table_0_paginate">
						<a tabindex="0"
							class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled"
							id="DataTables_Table_0_first">First</a>
						<a tabindex="0" class="previous fg-button ui-button ui-state-default ui-state-disabled"
							id="DataTables_Table_0_previous">Previous</a>
						<span id="pages">
							<!-- <a tabindex="0"
								class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
								<a tabindex="0"
								class="fg-button ui-button ui-state-default">2</a>
								<a tabindex="0"
								class="fg-button ui-button ui-state-default">3</a>
								<a tabindex="0"
								class="fg-button ui-button ui-state-default">4</a>
								<a tabindex="0"
								class="fg-button ui-button ui-state-default">5</a> -->
						</span>
						<a tabindex="0" class="next fg-button ui-button ui-state-default"
							id="DataTables_Table_0_next">Next</a>
						<a tabindex="0" class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default"
							id="DataTables_Table_0_last">Last</a>
					</div>

				</div>
			</div>
		</div>
	</div>

	<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
	<script src="js/jquery.ui.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.uniform.js"></script>
	<script src="js/select2.min.js"></script>
	<script src="js/jquery.dataTables.min.js"></script>
	<script src="js/matrix.js"></script>
	<script src="js/matrix.tables.js"></script>
</body>
<script src="js/myquery.js"></script>
<script>
	(function () {

		let tb = document.querySelector('#tbody');
		let uid = document.querySelector('#uid');
		let name = document.querySelector('#name');
		let psw = document.querySelector('#password');
		let email = document.querySelector('#email');
		let pages = document.querySelector('#pages');
		let ipage = 1;//第一页数据
		let num = 4;//每页显示3条
		//console.log(pages);

		function init() {
			ajax({
				type: 'get',
				url: 'api/getdata.php',
				data: {
					page: ipage,
					num: num
				},
				success: str => {
					// console.log(str);
					let arr = JSON.parse(str);
					// console.log(arr);
					creat(arr);
				}
			})
		}
		init();

		//渲染数据
		function creat(arr) {
			let str = arr.data.map(item => {
				return `<tr>
							<td><input type="checkbox" /></td>
							<td id="uid">${item.uid}</td>
							<td contenteditable="true" id="name">${item.name}</td>
							<td id="password" contenteditable="true">${item.psw}</td>
							<td class="center" id="email" contenteditable="true">${item.email}</td>
							<td>
							<button type="submit" class="btn btn-success">修改并保存</button>
							<button type="submit" class="btn btn-danger">删除</button>
							<button type="submit" class="btn btn-info">Edit</button>
							</td>
						</tr>`
			}).join('');
			// console.log(str);
			tb.innerHTML = str;

			// 	//页码生成
			let total = Math.ceil(arr.total / arr.num);//10/3 =4
			//console.log(total);

			let btnstr = '';
			for (let i = 1; i <= total; i++) {
				btnstr += `<a tabindex="0"
								class="fg-button ui-button ui-state-default ui-state-disabled">${i}</a>`;
			}

			pages.innerHTML = btnstr;//渲染页码

			for (let item of pages.children) {//排他
				item.style.background = '';
			}

			pages.children[arr.page - 1].style.background = 'blue';

			//给页面绑定事件
			pages.onclick = ev => {
				if (ev.target.tagName.toLowerCase() == 'a') {
					ipage = ev.target.innerHTML;//点哪页就请求哪页的数据
					init();
				}
			}
		}


		//利用事件委托实现保存，删除，编辑功能
		let btn_success = document.querySelector('.btn-success');
		let btn_danger = document.querySelector('.btn-danger');
		let btn_info = document.querySelector('.btn-info');
		let table = document.querySelector('#table');

		table.onclick = function (ev) {
			// if(ev.target.className == 'btn btn-success'){//修改保存
			// 	setCookie(ev.target);
			// }
			if (ev.target.className == 'btn btn-danger') {//删除
				//console.log(ev.target);
				let isok = confirm('确定要删除吗？');
				if (isok) {
					tb.removeChild(ev.target.parentNode.parentNode);
				}
			}
			// if(ev.target.className == 'btn btn_info'){//编辑
			// }
		}

	})();
</script>

</html>